import React from 'react'
import { Modal, Avatar, List, Skeleton, Spin } from 'antd'
import { useEffect, useState } from 'react'
import { useModel } from '@umijs/max'
import VirtualList from 'rc-virtual-list'

const ContainerHeight = 400

const DownloadCenter = ({ modalOpen, setModalOpen }) => {
  const { GetExportList } = useModel('DownloadCenter')
  const [listData, setListData] = useState([])
  const [loading, setLoading] = useState(false)

  const [pagination, setPagination] = useState({
    page: 0,
    total: 0,
    last_page: 0
  })

  useEffect(() => {
    setListData([])
    setPagination({
      page: 0,
      total: 0,
      last_page: 0
    })
    if (modalOpen) {
      getDownloadList()
    }
  }, [modalOpen])

  const getDownloadList = async () => {
    if (loading) {
      return
    }
    setLoading(true)
    const res = await GetExportList({
      page: pagination.page + 1
    })
    if (res) {
      setListData([...listData, ...res.data])
      setPagination({
        page: res.current_page, // 当前页
        total: res.total, // 总数
        last_page: res.last_page // 最后一页
      })
      setLoading(false)
    }
  }

  const onScroll = e => {
    if (Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - ContainerHeight) <= 1) {
      if (pagination.page < pagination.last_page) {
        getDownloadList()
      }
    }
  }

  return (
    <Modal
      title='导出中心'
      style={{
        position: 'fixed',
        top: 60,
        right: '5%'
      }}
      width={450}
      open={modalOpen}
      onCancel={() => setModalOpen(false)}
      footer={null}
      mask={false}
      destroyOnClose={true}
    >
      <>
        {listData.length === 0 && loading ? (
          <Skeleton
            avatar
            paragraph={{
              rows: 3
            }}
            active
          />
        ) : (
          <>
            <List>
              <VirtualList data={listData} height={ContainerHeight} itemHeight={47} itemKey='id' onScroll={onScroll}>
                {item => (
                  <List.Item key={item.id}>
                    <List.Item.Meta
                      avatar={<Avatar shape='square' src='https://qny.weizulin.cn/images/202403111656696.svg' />}
                      title={
                        <div>
                          <div>{item.file_name || '正在整理数据，请稍候...'}</div>
                          <a href={item.url} disabled={item.status !== 2}>
                            下载到本地
                          </a>
                        </div>
                      }
                      description={item.updated_at}
                    />
                  </List.Item>
                )}
              </VirtualList>
            </List>

            {pagination.page === pagination.last_page && (
              <div style={{ textAlign: 'center', color: '#999', marginTop: 10 }}>🤐 没有更多了</div>
            )}

            {loading && (
              <div style={{ textAlign: 'center', marginTop: 10 }}>
                <Spin />
                <span style={{ marginLeft: '10px', color: '#999' }}>数据加载中...</span>
              </div>
            )}
          </>
        )}
      </>
    </Modal>
  )
}

export default DownloadCenter
